import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import moment from 'moment';
import { history } from 'umi';
import { eventTrack } from '@/utils/track';
import { Form, Table, Divider } from 'antd';
import { utils } from 'vv-frontend-components';
import LinkTo from '@/components/LinkTo';
import { Pagination } from '@/components';
import PageRouter from '@/components/PageRouter/PageRouter';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './index.less';

const MyRegularization = ({ loading, myRegularization, dispatch }) => {
    // 过滤高级搜索空格
    const { deepTrim } = utils;
    const { pagination, data } = myRegularization;
    const [showRow, setShowRow] = useState();
    // 获取参数
    // 获取查询参数
    const getSearchData = pageNo => {
        // 接口传参参数
        const payload = {
            pageNo: pageNo || pagination.current,
            pageSize: pagination.pageSize
        };
        return payload;
    };
    // 接口请求
    const fetchList = (ctx = {}) => {
        const { pageNo = null } = ctx;
        dispatch(
            deepTrim({
                type: 'myRegularization/fetchList',
                payload: {
                    ...getSearchData(pageNo)
                }
            })
        );
    };

    // 列表项
    const columns = [
        {
            title: '姓名',
            dataIndex: 'employeeName',
            key: 'employeeName',
            width: 200
        },
        {
            title: '隶属公司',
            dataIndex: 'companyName',
            key: 'companyName',
            width: 200
        },
        {
            title: '部门',
            dataIndex: 'departmentName',
            key: 'departmentName',
            width: 200,
            render(text, record) {
                return <div>{record.departmentName}</div>;
            }
        },
        {
            title: '职位',
            dataIndex: 'postName',
            key: 'postName',
            width: 200,
            render(text, record) {
                return <div>{record.postName}</div>;
            }
        },
        {
            title: '预计转正日期',
            dataIndex: 'regularDate',
            key: 'regularDate',
            width: 150,
            render(text) {
                return (
                    <div>
                        <span>{moment(text).format('YYYY-MM-DD')}</span>
                        {/* {record.delayRegularDays ? (
                            <div style={{ color: '#f00' }}>已超期限{record.delayRegularDays}天</div>
                        ) : null} */}
                    </div>
                );
            }
        },
        {
            title: '状态',
            dataIndex: 'assigneeEmployeeNames',
            key: 'assigneeEmployeeNames',
            render(text) {
                return <div className={styles.statusDiv}>{text}</div>;
            }
        },
        {
            title: '操作',
            dataIndex: '',
            key: '',
            fixed: 'right',
            width: 200,
            render(text, record) {
                return (
                    <div>
                        <LinkTo
                            onClick={async (e, url) => {
                                // 埋点
                                await eventTrack({
                                    eventName: 'personal_my_regularization_operator_click',
                                    eventProps: {
                                        label: '我的转正-操作-详情'
                                    }
                                });
                                history.push(url);
                            }}
                            to="/personal/portal/flow/mine/applyRegularization"
                            query={{
                                regularId: record.id
                            }}
                        >
                            详情
                        </LinkTo>
                        {showRow === record.id && record.finishNum ? <Divider type="vertical" /> : null}
                        {showRow === record.id && record.finishNum ? (
                            <LinkTo
                                to="/personal/portal/myOnboardAndLeave/regularHistory"
                                query={{
                                    employeeCode: record.employeeCode,
                                    employeeName: record.employeeName,
                                    companyId: record.companyId,
                                    type: 'personal'
                                }}
                            >
                                历史记录
                            </LinkTo>
                        ) : null}
                    </div>
                );
            }
        }
    ];

    // 分页功能
    const tableChange = paginations => {
        dispatch({
            type: 'myRegularization/save',
            payload: {
                pagination: {
                    ...myRegularization.pagination,
                    ...paginations
                }
            }
        });
    };

    // 鼠标移入每一行的事件
    const onRow = row => ({
        onMouseEnter: () => {
            setShowRow(row.id);
        },
        onMouseLeave: () => {
            setShowRow();
        }
    });

    // 组件卸载时候 清空表单请求参数（高级搜索内容、分页、排序字段）
    useEffect(
        () => () => {
            dispatch({
                type: 'myRegularization/save',
                payload: {
                    pagination: {
                        ...pagination,
                        pageSize: 10,
                        current: 1
                    },
                    data: []
                }
            });
        },
        []
    );
    // 每当分页数、页面条数、排序、筛查项改变时均应该重新请求表格数据
    useEffect(() => {
        fetchList();
    }, [pagination.pageSize, pagination.current]);
    return (
        <PageHeaderWrapper>
            <PageRouter type="myOnboardAndLeave">
                <div style={{ marginTop: 16 }}>
                    <Table
                        bordered={false}
                        columns={columns}
                        loading={loading.models.myRegularization}
                        scroll={{
                            x: 'max-content'
                        }}
                        dataSource={data}
                        rowKey="id"
                        onChange={tableChange}
                        onRow={onRow}
                        pagination={false}
                    />
                    <Pagination {...myRegularization.pagination} onChange={tableChange} />
                </div>
            </PageRouter>
        </PageHeaderWrapper>
    );
};
export default connect(({ myRegularization, loading }) => ({
    myRegularization,
    loading
}))(Form.create()(MyRegularization));
